<template>
	<div class="header">厦门保险机构查询</div>

	<div class="body">
		<div class="title">公司分类</div>

		<ul class="list">
			<router-link v-for="typeItem in types" :to="typeItem.path" class="item"
				>{{ typeItem.name }}

				<img src="@/assets/入口.svg" alt="" />
			</router-link>
		</ul>
	</div>

	<van-floating-bubble axis="xy" icon="phone" magnetic="x" @click="onClick" />
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
	setup(props, { emit, slots, attrs }) {},
	data() {
		return {
			types: [
				{ name: '财产保险公司', path: '/list?type=财险公司&name=财产保险公司' },
				{ name: '人身保险公司', path: '/list?type=寿险公司&name=人身保险公司' },
				{ name: '保险中介公司', path: '/list?type=中介公司&name=保险中介公司' }
			]
		}
	},
	computed: {},
	mounted() {},
	methods: {
		onClick() {
			this.$router.push('/about')
		}
	},
	components: {}
})
</script>

<style lang="scss" scoped="scoped">
.header {
	height: 300rem;
	background-image: url('@/assets/network.jpg');
	background-position: center top;
	background-size: cover;
	background-color: #e3d2ff;
	background-repeat: no-repeat;
	font-family: ZCoo GaoduanHei;
	line-height: 250rem;
	// padding-left: $space_4;
	font-size: 64px;
	font-style: italic;
	color: #fff;
	text-align: center;
}

.body {
	border-radius: 40rem 40rem 0 0;
	margin-top: -20rem;
	background-color: #fff;
	height: calc(100vh - 260rem);
	padding-top: 40rem;
	background-image: -webkit-linear-gradient(top, #e6f6ff, #fff 100rem),
		-webkit-linear-gradient(top, #e6f6ff, #fff 100rem);
	.title {
		padding: $space_1 $space_4;
		padding-bottom: $space_4;
	}
}

ul.list {
	margin: 0 $space_4;

	.item {
		display: block;
		box-shadow: 0 0 26rem #e0eff1;
		color: #333;
		height: 120rem;
		width: 100%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: $font_medium;
		margin-bottom: $space_3;
		position: relative;

		img {
			width: 30px;
			height: 30px;
			transform: translateY(-50%) rotate(90deg);
			object-fit: contain;
			position: absolute;
			right: 40rem;
			top: 50%;
		}
	}
}
</style>
